<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      v-if和v-show它两者都是决定元素是否显示或隐藏功能
      条件为真或假   true显示  false隐藏
     -->
     <!-- 
       v-if
        1.v-if如果为true则显示，为false时则会删除此元素
        2.v-if它初始时性能消耗较小，但是如果频繁的切换它的性能较低，原因在于它要不停的创建和删除元素
        3.v-if一般用于后台菜单的动态显示
     -->
     <div v-if="show">我是v-if</div>
     <hr>
     <!-- 
       v-show 
        1.v-show如果为true则显示，为false时则会通过css样式来完成元素的隐藏操作
        2.v-show它初始化时性能消耗较大的，因为在创建时它需要来计算对应元素的样式属性，但是在频繁切换时它的性能较高
        3.前台的tab切换栏
     -->
     <div v-show="show">我是v-show</div>


  </div>

  <script>

    new Vue({
      el: '#app',
      data: {
        show: true
      }
    })
  </script>
</body>

</html>